<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .bg{
            width: 1100px;
            height: 610px;
            position: relative;
            margin: 10px auto;
            cursor: pointer
        }
        .pic{
            width: 1100px;
            height: 610px;
        }
        .pic>img{
            position: absolute;
            left: 0;
            top:0;
            opacity: 0;
        }
        .pic>img:nth-of-type(1){
            z-index: 1;
            opacity: 1;
        }
        .bo{
            width: 100%;
            height: 40px;
            line-height: 40px;
            background-color: #015293;
            position: absolute;
            color: white;
            left: 0;
            z-index: 10;
        }
        .bonav{
            width: 100px;
            height: 12px;
            position: absolute;
            z-index: 20;
            right: 10px;
            bottom: -24px;
        }
        .bonav>span{
            width: 12px;
            height: 12px;
            border-radius:100%;
            margin-right: 8px;
            background-color: #ccc;
            display: block;
            float: left;
        }
        .bonav>.white{
            background-color: white;
        }
        .nav {
            position: absolute;
            top: 50%;
            margin-top: -34px;
            z-index: 30;
            display: none;
        }

        .nav1 {
            left: 0;
        }

        .nav2 {
            right: 0;
        }
    </style>
</head>
<body>
<div id="bg" class="bg">
    <div id="pic" class="pic">
        <img src="1.jpg" />
        <img src="2.jpg" />
        <img src="3.jpg" />
        <img src="4.jpg" />
        <img src="5.jpg" />
    </div>
    <div class="bo" id="bo">

    </div>
    <div id="bonav" class="bonav">
        <span class="white"></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
    <img src="http://www.gov.cn/govweb/xhtml/2016gov/images/public/index_btn01.png" id="nav1" class="nav nav1">
    <img src="http://www.gov.cn/govweb/xhtml/2016gov/images/public/index_btn02.png" id="nav2" class="nav nav2">
</div>
</body>
<script>
    bg.onmouseover=function () {
        nav1.style.display="block";
        nav2.style.display="block";
    };
    bg.onmouseout=function () {
        nav1.style.display="none";
        nav2.style.display="none";
    };
    var imgs=pic.getElementsByTagName("img");
    var spans=bonav.getElementsByTagName("span");
    var i=0;
    var zi=["习近平在北京市调研指导新型冠状病毒肺炎疫情防控工作1",
        "李克强考察中国医科院：早一天发现有效药，这个病毒就不可怕了",
        "习近平在北京市调研指导新型冠状病毒肺炎疫情防控工作3",
        "习近平在北京市调研指导新型冠状病毒肺炎疫情防控工作4",
        "习近平在北京市调研指导新型冠状病毒肺炎疫情防控工作5"];
    function f() {
        for(var i=0;i<spans.length;i++){
            spans[i].className="";
        }
    }
    for(var j=0;j<spans.length;j++){
        spans[j].onmouseover=function () {
            if(i==j){
                return;
            }
            f();
            imgs[j].style.opacity=1;
            imgs[i].style.opacity=0;
            bo.innerHTML=zi[j];
            spans[j].className="white";
            i=j;
        };
    }
    bo.innerHTML=zi[i];
    nav2.onclick=nextPic;
    function nextPic() {
        f();
        if(i==4){
            imgs[i].style.opacity=0;
            imgs[0].style.opacity=1;
            bo.innerHTML=zi[0];
            spans[0].className="white";
            i=0;
            return;
        }
        imgs[i].style.opacity=0;
        imgs[i+1].style.opacity=1;
        bo.innerHTML=zi[i+1];
        spans[i+1].className="white";
        i++;
    }
    nav1.onclick=function () {
       f();
        if(i==0){
            imgs[4].style.opacity=1;
            imgs[0].style.opacity=0;
            bo.innerHTML=zi[4];
            spans[4].className="white";
            i=4;
            return;
        }
        imgs[i].style.opacity=0;
        imgs[i-1].style.opacity=1;
        bo.innerHTML=zi[i-1];
        spans[i-1].className="white";
        i--;
    };
    setInterval(nextPic,6000);
</script>
</html>